<template>
	<view class="wanl-order-list">
		<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="navbar bg-white margin-bottom-sm fixed">
			<view class="nav-item text-df margin-lr" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</scroll-view>
		
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true ,emptyImage:$wanlshop.oss('/uploads/20230922/bf1554b8b3aef7aed61e0b36f2ca8e55.jpg') }" @load="load($event,'load')" @refresh="load($event,'refresh')" style="padding-top: 80rpx;">
			<view class="tab-content">
					<!-- 订单列表 -->
					<view v-for="(order, okey) in orderList" :key="okey" class="order-item">
						<view class="header">
							<view class="shop flex align-center justify-start">
								<text class="text-df">订单编号</text>
								<text class="text-s" @tap="$wanlshop.copy(order.order_no)">{{order.order_no}}</text>
							</view>
							<view class="text-sm">
								<text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
								<!-- <text class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id,okey)"></text> -->
							</view>
						</view>
						<!-- 商品 -->
						<view class="goods-box" v-for="(goods, gkey) in order.product" :key="goods.id" @tap="$wanlshop.to(`/pages/user/record/medicalvisit/details?id=${order.id}&type=medicalvisit&t=2`)">
							<view class="cu-avatar xl margin-right-sm radius" :style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										{{goods.title}}
									</view>
									<view class="text-cut">
										<text class="">服务地址：</text>
										<text class="">{{order.address_detail_text}}</text>
									</view>
									<view class="">
										<text class="">下单时间：</text>
										<text class="">{{order.createtime}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 底部 -->
						<view class="price-box text-sm flex">
							<view>合计：<text class="text-price">{{order.total_amount}}</text></view>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.order_status == 1 || order.order_status == 3 || order.order_status == 9">
							<button v-if="order.order_status == 1" class="cu-btn radius10 line-green margin-right-sm" @tap="cancelOrder(order,key)">取消订单</button>
							<button v-if="order.order_status == 3" class="cu-btn radius10 line-green margin-right-sm" @tap="getStatus(order,1)">开始服务</button>
							<button v-if="order.order_status == 9" class="cu-btn radius10 margin-right-sm line-green" @tap="getStatus(order,1)">继续服务</button>
							<button v-if="order.order_status == 9" class="cu-btn radius10 margin-right-sm line-green" @tap="getStatus(order,2)">结束服务</button>
						</view>
					</view>
					
				</scroll-view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList:[],
			tabCurrentIndex: 0,
			navList: [
				{
					order_status: 0,
					text: '全部'
				},
				// {
				// 	order_status: 1,
				// 	text: '待付款'
				// },
				// {
				// 	order_status: 2,
				// 	text: '待分配'
				// },
				{
					order_status: 3,
					text: '待服务'
				},
				{
					order_status: 9,
					text: '服务中'
				},
				{
					order_status: 4,
					text: '服务完成'
				},{
					order_status: 5,
					text: '用户已确认'
				},{
					order_status: 6,
					text: '待评价'
				},{
					order_status: 7,
					text: '已完成'
				},{
					order_status: 8,
					text: '已取消'
				}
			],
			scrollLeft:0
		};
	},
	onShow() {
		if(this.$refs.list) {
			this.load({page:1},'refresh')
		}
	},
	methods: {
		load(paging,key) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let order_status = navItem.order_status;
			uni.request({
				url: `${this.$config.vehicleurl}/addons/medicalvisit/api.Order/getServiceOrderList`,
				data: {
					status: order_status,
					page: paging.page
				},
				success: res => {
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.order_status));
						//演示数据所以自己进行状态筛选
						if (order_status === 0) {
							//0为全部订单
							return item;
						}
						return item.order_status === order_status;
					});
					if(key == 'load') {
						this.orderList = [...this.orderList, ...orderList];
						this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
					} else if(key == 'refresh') {
						this.orderList = orderList;
						this.$refs.list.refreshSuccess({ list: orderList, total: res.data.total });
					}
				}
			});
		},
		//顶部tab点击
		tabClick(index) {
			this.$refs.list.refreshScrollView()
			this.tabCurrentIndex = index;
			this.load({page:1},'refresh')
			this.scrollLeft = index * 60
		},
		//取消订单- 设置为7 -全局
		async cancelOrder(item,index) {
			uni.showLoading({
				title: '请稍后'
			});
			// 获取列表
			await uni.request({
				url: `${this.$config.vehicleurl}/addons/medicalvisit/api.Order/cancleOrder`,
				method: 'POST',
				data: {
					order_id: item.id
				},
				success: res => {
					uni.hideLoading();
					this.$wanlshop.msg('订单取消成功')
					this.$refs.list.refreshScrollView()
					this.load({page:1},'refresh')
				}
			});
		},
		commentOrder(id){
			this.$wanlshop.to('/pages/user/order/comment?order_id=' + id);
		},
		//支付订单
		paymentOrder(id){
			this.$wanlshop.to(`/pages/user/money/pay?id=${id}&type=medicalvisit`);
		},
		//订单状态文字和颜色
		orderStateExp(order_status) {
			let stateTip = '',
				stateTipColor = '#4CBD66';
			switch (+order_status) {
				case 1:
					stateTip = '待付款';
					stateTipColor = '#f40';
					break;
				case 2:
					stateTip = '待分配';
					break;
				case 3:
					stateTip = '待服务';
					break;
				case 9:
					stateTip = '服务中';
					break;
				case 4:
					stateTip = '服务完成';
					break;
				case 5:
					stateTip = '用户已确认';
					break;
				case 6:
					stateTip = '待评价';
					break;
				case 7:
					stateTip = '已完成';
					stateTipColor = '#777';
					break;
				case 8:
					stateTip = '已取消';
					stateTipColor = '#777';
					break;
				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		getRefund(status) {
			return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
		},
		async getStatus(order,k) {
			let data = await uni.request({
				url: `/addons/medicalvisit/api.order/serviceStatus`,
				method: 'POST',
				data: {
					order_id: order.id,
					serves_uid: this.$store.state.user.id, // 服务人员ID
					serves_type: 2,
					customer_id: order.user_id
				},
				success: (res) => {
					if(res.data) {
						if(res.data.status == 0) {
							if(k == 1) {
								this.startService(order)
							} else {
								this.$wanlshop.msg('服务未开始')
							}
						} else if(res.data.status == 1) {
							if(k == 1) {
								// this.$wanlshop.msg('服务已开始')
								this.$wanlshop.to(`/pages/common/rtmp/transcribe?order_id=${order.id}&type=medicalvisit&name=继续服务&timestamp=${order.service_log.createtime}`)
							} else {
								this.endService(order,res.data.id)
							}
						} else if(res.data.status == 2) {
							this.$wanlshop.msg('服务已经结束')
						} else if(res.data.status == 4) {
							this.$wanlshop.msg('服务已作废')
						}
					} else {
						if(k == 1) {
							this.startService(order)
						} else {
							this.$wanlshop.msg('服务未开始')
						}
					}
				}
			})
		},
		async startService(item,index,okey) {
			let data = {
				type:'medicalvisit',
				serves_type:2,
				user_id:item.user_id,
				id:item.id,
				address: item.address_detail,
				lat:item.lat,
				lng:item.lng
			}
			this.$wanlshop.to(`/pages/user/signin/sign?data=${encodeURIComponent(JSON.stringify(data))}`)
			// return false;
			// await uni.request({
			// 	url: `/member/serves/start`,
			// 	method: 'POST',
			// 	data: {
			// 		order_id: item.id,
			// 		serves_uid: this.$store.state.user.id, // 服务人员ID
			// 		serves_type: 2,
			// 		customer_id: item.user_id,
			// 		clock_address: uni.getStorageSync('formatted_address')
			// 	},
			// 	success: res => {
			// 		this.$refs.list.refreshScrollView()
			// 		this.load({page:1},'refresh')
			// 		this.$wanlshop.to(`/pages/common/rtmp/transcribe?order_id=${item.id}&type=medicalvisit`)
			// 	}
			// });
		},
		async endService(order,serves_id) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					uni.request({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							uni.uploadFile({
								url: updata.data.uploadurl,
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: updata.data.storage == 'local' ? null : updata.data.multipart,
								success: res => {
									this.endServices(order,serves_id,JSON.parse(res.data).data.url)
								},
								fail: error => {
									this.$wanlshop.msg(JSON.parse(error.data).msg);
								}
							});
						}
					});
				}
			});
		},
		async endServices(order,serves_id,img) {
			await uni.request({
				url: `/addons/medicalvisit/api.Order/endService`,
				method: 'POST',
				data: {
					serves_id: serves_id,
					order_id:order.id,
					serve_document:img
				},
				success: res => {
					if(res.res.code == 1) {
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
						this.$wanlshop.msg(res.msg)
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	height: 100%;
}
.navbar {
	display: flex;
	justify-content: flex-start;
	white-space: nowrap;
	.nav-item {
		display: inline-flex;
	}
}
.order-item {
	margin: 0 0 10rpx 0;
	padding: 12rpx 0 38rpx 30rpx;
	&:last-child {
		margin: 0;
	}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 42rpx;
		padding-right: 30rpx;
		.state {
			display: inline-block;
			font-family: PingFang SC-Medium, PingFang SC;
			height: 42rpx;
		}
		.shop {
			text {
				display: inline-block;
				&:nth-child(1) {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #888888;
					height: 42rpx;
					line-height: 42rpx;
				}
				&:nth-child(2) {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					height: 42rpx;
					line-height: 42rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.goods-box {
		padding-top: 0;
		margin-top: 16rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.cu-avatar {
			width: 140rpx;
			height: 140rpx;
		}
		.describe {
			> text {
				display: inline-block;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 18rpx;
			}
			view {
				display: flex;
				justify-content: flex-start;
				&:nth-child(1) {
					margin-bottom: 10rpx;
				}
				text{
					display: inline-block;
					&:nth-child(1) {
						font-size: 27rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #888888;
						line-height: 44rpx;
					}
					&:nth-child(2) {
						font-size: 25rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #333333;
						line-height: 44rpx;
						width: 400rpx;
					}
				}
			}
		}
	}
	.price-box {
		padding: 0;
		padding-right: 30rpx;
		margin: 12rpx 0 0 0;
		font-size: 20rpx;
		color: #888888;
		text {
			font-size: 36rpx;
			color: #E31F1F;
			font-weight: bold;
		}
	}
	.action-box {
		padding-bottom: 0;
		button {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			margin-top: 28rpx;
		}
	}
}

</style>
